@import 'base.css';
@import 'ad-style.css';
/* 头部开始 */
.head
{
    /* width: 1349px; */
    /* 不设整体宽度，因为此处背景适应屏幕 */
    background: #000;
}
.head-wrap
{
    width: 1220px;
    height: 100px;
}
.head-logo
{
    display: inline-block;
    float: left;
    margin-top:25px;
    margin-right: 260px;
}
.head-nav-ul
{
    float: left;
    list-style-type: none;  
}
.head-nav-ul li
{
    float: left;
    margin-right: 20px;
    margin-top: 40px;
    padding-left: 8px;
    padding-right: 8px;
}
.head-nav-ul li a
{
    color:#ccc;
    text-decoration: none;
}
.head-nav-ul li a:hover{
    color:#fff;
}
#head-ul-a
{
    color:#fff;
}
.login
{
    display: inline-block;
    margin-top: 40px;
    float: right;
    margin-right: 40px;
    position: relative;

}
.login::before
{
    content: "";
    display: block;
    position: absolute;
    left: -35px;
    top: 0;
    width: 1px;
    height: 20px;
    background: #ededed;
}
.login a
{
    color: #fff;
    opacity: 0.8;
    text-decoration: none;
    border: 1px solid #ccc;
    padding: 4px 30px;
    border-radius: 3px;
    background: rgba(255,255,255,0.1);
}
/* 头部结束 */
/* 子导航开始 */
.navigation
{
    width: 1349px;
}
/* 高度由本身的90px变成94px？ */
.navi-wrap ul
{
    display: inline-block;
    list-style-type: none; 
    line-height: 90px; 
    /* inline-block默认基线对齐，我们改变其对准 */
    vertical-align: bottom;
}
.navi-wrap ul li
{
    float: left;
    margin-right: 50px;
}
.navi-wrap ul li a
{
    color: #666;
    text-decoration: none;
}
.navi-wrap ul li a:hover 
{
    color: #09F;
}
.navi-ul-a
{
    font-weight: bold;
}
/* 购物车开始 */
.shopping-cart
{
    display: inline-block;
    height: 50px;
    float: right;
    /* margin-left: 50px; 
    不设置浮动时仍然有效*/
    margin-top:30px;
    margin-right: 143px;
    /* 不进行float：right时，inline-block的margin-top无效？
    直接设置line-height：50px只有span的提升高度
    而i和购物车字样以及span内部文字不提升高度？ */
    text-decoration: none;
    color:#ccc;
    position: relative;
}
.shopping-cart>i
{
    font-weight: bold; 
    font-size:20px;
    color:#666;
}
.shopping-cart span
{
    display: inline-block;
    color:#fff;
    border-radius: 50%;
    background: #999;
    width: 20px;
    height: 20px;
    text-align: center;
}
.shopping-cart-content
{
    width: 300px;
    height: 200px;
    display: none;
    background: #fff;
    border-radius: 8px;
    text-align: center;
    position: absolute;
    right: -34px;
    top: 43px;
    z-index: 5;
}
.shopping-cart-content::before
{
    content: "";
    width: 0px;
    height: 0px;
    display: block;
    position: absolute;
    border:10px solid transparent;
    border-bottom-color: #fff;
    left: 246px;
    top: -20px;
}
.shopping-cart-content>i
{
    font-size: 90px;
    font-weight: bold;
    color:rgb(233, 230, 230);
}
.shopping-cart-content>label
{
    color:#000;
    font-size: 16px;
    line-height: 30px;
}
.shopping-cart-content>p
{
    color: #DCDCDC;
    font-size: 12px;
}
.shopping-cart:hover .shopping-cart-content 
{
    display: block;
}
/* 购物车结束 */
/* 子导航结束 */

/* 大图广告及新品广告开始 */
.big-photo-ad
{
    margin-bottom: 30px;
}
.big-photo-ad img
{
    height: 501px;
}
/* 大图广告及新品广告结束 */

/* 热门商品开始 */

.pro-list>div
{
    height: 430px; 
    width: 25%;
    float: left;
    text-align: center;
    background: #fff;
}
.pro-list>div::before 
{
    content: "";
    border-left: #e6e6e6 1px solid;
    border-bottom:  #e6e6e6 1px solid;
    position: absolute;
    display: block;
    width: 100%;
    height: 430px; 
}
.cover
{
    width: 305px;
    height: 430px; 
    position: absolute;
    display: none;
    box-shadow: 0px 0px 20px #E6E6E6 inset;
}
.pro-list div:hover .cover
{
    display: block;
}
.cover span
{
    display: inline-block;
    margin-top: 371px;
    background: #fff;
}
.cover a 
{
    border: 1px solid #E6E6E6;
    font-size: 12px;
    width: 100px;
    height: 28px;
    display: inline-block;
    line-height: 28px;
    border-radius: 5px;
    text-decoration: none;
}
.cover .view-detail
{
    background: #f9f9f9;
    color: #646464;
}
.cover .view-detail:hover 
{
    background: #ededed;
}

.cover .add-to-shopping-cart 
{
    background: #678ee7;
    color: #fff;
}
.cover .add-to-shopping-cart:hover 
{
    background: #6c8cd4;
}

 
.cover+img
{
    width: 206px;
    height: 206px;
    margin: 50px auto 30px;
}
.pro-list div>h2
{
    font-size: 16px;
    font-weight: normal;
}
.pro-list div>p
{
    font-size: 12px;
    color: #B2B2B2;
}
.color-select a
{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 15px;
    position: relative;
    margin-left: 5px;
}
.color-select a:nth-child(1)
{
    
    background: #DE4037;
}
.color-select a:nth-child(2)
{
   
    background: #6c8cd4;
}
.color-select a:nth-child(3)
{
    
    background: darkcyan;
}
.color-select a:nth-child(4)
{
    
    background: darkorange;
}
.blank
{
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-top: 15px;
}
.selected
{
    display: inline-block;
    position: absolute;
    display: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0px 0px 1px 2px #999;
    left: -0.8px;
    top: -1.5px;
}
.color-select a:hover .selected
{
    display: block;
}
.price
{
    display: inline-block;
    margin-top: 15px;
    font-size: 18px;
    color: #DE4037;
    font-family: arial;
}
/* 热门商品结束 */

/* 官方精选开始 */
.pro-list>.main-product
{
    width:50%;
}
.pro-list>.main-product>img
{
    width: 100%;
    height: 100%;
    margin: 0px;
}
.pro-list>.main-product>.cover
{
    width: 610px;
}
/* 官方精选结束 */
/* 品牌精选开始 */

/* 品牌精选结束 */
/* 锤子科技动态开始 */

/* 锤子科技动态结束 */
/* 锤子应用开始 */
.application 
{
    float: right;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    width: 100px;
    height: 35px;
    background: #FeFeFe;
    text-indent: 0px;
    margin-top: 10px;                                           
    margin-right: 20px;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
    color: #000;
}
.application hover
{
    background: #FAFAFA;
}
.app-list>div
{            
    height: 354px; 
}
.app-list>div::before
{
    height: 354px;
}
.pro-list .shadow
{
    height: 354px;
}
.pro-list-img
{
    margin-top: 90px;
}
.pro-list>div .pro-list-h2
{
    line-height: 1.2;
    color: #424242;
    margin-top: 40px;
}
.pro-list-p
{
    margin: 6px auto;
    width: 80%;
    text-align: center;
    height: 30px;
    display: block;
}
.app-log 
{
    margin-top: 30px;
    margin-bottom: 50px;
}
.app-span
{
    display: block;
    width: 274.5px;
    height: 270.5px;
    background: #fff;
    position: absolute;
    z-index: 5;
    left: 15px;
    top: 60px;
    display: none;
}
.download:hover .app-span
{
    display: block;
}
.download{position: absolute;}
.download span a:not(:last-child)
{
    width: 210px;
    border-radius: 5px;
    display: block;
    background: #6891E2;
    margin: 20px auto 40px auto;
}
.app-span >a:not(:last-child):hover 
{
    background: #06F;
}
.icon-windows,.icon-apple
{
    color:#fff;
}
.windows-content,.apple-content
{
    display: inline-block;
    height: 50px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 50px;
}
.hand-shaker-content
{
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    color: #06F;
}
.app-span>img
{
    display: block;
    margin: 0 auto;
    margin-top: 28px;
    margin-bottom: 30px;
}
/* 锤子应用结束 */
/* 论坛精选开始 */
.forum-list
{
    height: 365px;
    background: #fff;
}
.forum-list>div::before
{
    height: 365px;
}
.forum-list .shadow
{
    height: 365px;
}
.forum-list>div>img 
{
    width: 245px;
    height: 156px;
    margin: 30px;
    border-radius: 8px;
}
.forum-text 
{
    text-align: left;
    margin-left: 30px;
    margin-right: 30px;
    overflow: hidden;
}
.forum-text>h2 
{
    font-size: 16px;
    font-weight: normal;
    height: 48px;
}
.forum-text>p 
{
    margin-top: 10px;
    overflow: hidden;
    
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
    font-size: 12px;
    color: #B2B2B2;
    height: 35px;
}
.forum-text>span a 
{
    color: #5079D9;
    font-size: 12px;
}
/* 论坛精选结束 */
/* 尾部开始 */
.footer
{
    background: #fafafa;
    border-top: 1px solid #e6e6e6; 
}
.siteinfo 
{
    height: 100px;
    padding: 100px 0 32px;
    border-bottom: 1px solid #e6e6e6;
    /* position: relative; */
}
.footer-bottom 
{
    padding: 40px 0px;
    font-size: 12px;
}
.nav-footer>li 
{
    width: 140px;
    font-size: 12px;
}
.nav-footer li h3 
{
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 10px;
}
.nav-footer li ul li 
{
    line-height: 20px;
    width: 140px;
}
.nav-footer li ul li a:hover {
    color: #5079d9;
}  
.contact 
{
    float: right;
    text-align: right;
}
.contact h2 
{
    font-size: 30px;
    color: #646464;
    font-weight: normal;
}
.contact p 
{
    font-size: 12px;
    color: #CCCCCC;
    line-height: 30px;
}
.contact a 
{
    font-size: 14px;
    color: #5079d9;
    border: 1px solid #E6E6E6;
    display: inline-block;
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
}
.contact a span 
{
    width: 15px;
    height: 15px;
    background: #5079d9;
    display: inline-block;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 15px;
    font-size: 12px;
    margin-right: 10px;
}
.contact a:hover 
{
    background: #CCC;
}
.footer-bottom ul li 
{
    margin: 0 8px;
}
.footer-bottom ul li a 
{
    color: #5079D9;
    border-left: 1px solid #CCCCCC;
    padding-left: 10px;
}
.footer-bottom p 
{
    clear: both;
    line-height: 28px;
}
.footer-bottom p a 
{
    color: #E6E6E6;
    margin: 0 10px;
}
.language 
{
    float: right;
    margin-top: -90px;
    position: relative;
}
.CHIN 
{
    width: 110px;
    height: 45px;
    text-align: center;
    line-height: 52px;
    background: url(../images/language.png) no-repeat 12px 19px;
    cursor: pointer;
}
.CHIN span 
{
    width: 0px;
    height: 0px;
    display: inline-block;
    border-width: 4px;
    border-style: solid;
    border-color: black transparent transparent transparent;
    margin-left: 13px;
    position: relative;
    top: 3px;
}
.language:hover .CHIN span {
    border-color: transparent transparent #5079D9 transparent;
    top: -3px;
}
.language:hover .CHIN 
{
    color: #5079D9;
    background: #FAFAFA url(../images/language.png) no-repeat 12px 19px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0px 0px 1px 1px #E6E6E6;
}
.Eng 
{
    width: 110px;
    height: 45px;
    line-height: 45px;
    background: url(../images/language.png) no-repeat 12px -15px;
    position: absolute;
    top: -45px;
    box-shadow: 0px 0px 1px 1px #E6E6E6;
    text-align: center;
    display: none;
}
.language:hover .Eng 
{
    color: #5079D9;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: #fff url(../images/language.png) no-repeat 12px -15px;
    display: block;
}
/* 尾部结束 */